<template>
  <div>child1组件 - {{ count }} - {{ name2 }} - {{ age }} - {{ address }}</div>
</template>

<script>
// mapState是state的辅助函数，用于简化state的引入
import { mapState } from "vuex";

export default {
  // this.$store表示仓库实例
  // 不能再data里面获取仓库数据，因为会没有响应式
  // 获取仓库数据，只能在计算属性里面获取
  // data() {
  //   return {
  //     count: this.$store.state.count,
  //   };
  // },

  // computed: {
  //   count() {
  //     return this.$store.state.count;
  //   },
  //   name() {
  //     return this.$store.state.name;
  //   },
  //   age() {
  //     return this.$store.state.age;
  //   },
  //   address() {
  //     return this.$store.state.address;
  //   },
  // },

  data() {
    return {
      str: "牛田社区",
      num: 2,
    };
  },

  // 数组写法，引进来的变量不能改名了
  // computed: mapState(["count", "name", "age", "address"]),
  // computed: mapState({
  //   count: "count",
  //   name2: "name",
  //   age: (state) => state.age + 1,
  //   address(state) {
  //     return state.address + this.str;
  //   },
  // }),
  // computed: {
  //   doubleNum() {
  //     return this.num * 2;
  //   },
  // },

  computed: {
    ...mapState({
      count: "count",
      name2: "name",
      age: (state) => state.age + 1,
      address(state) {
        return state.address + this.str;
      },
    }),
    doubleNum() {
      return this.num * 2;
    },
  },

  // computed: Object.assign(
  //   mapState({
  //     count: "count",
  //     name2: "name",
  //     age: (state) => state.age + 1,
  //     address(state) {
  //       return state.address + this.str;
  //     },
  //   }),
  //   {
  //     doubleNum() {
  //       return this.num * 2;
  //     },
  //   }
  // ),
};
</script>
